<template>
    <header>
        <div class="my-header">
            <a href="#"><img src="../assets/img/33.png" alt=""></a>
            <ul class="main-nav">
                <li>主页</li>
                <li>编程</li>
                <li>看书</li>
                <li>生活</li>
                <li>趣事</li>
                <li>ps</li>
            </ul>
            <form action="">
                <input type="text" name="" id="">
                <span>search</span>
            </form>
            <ul class="info-nav">
                <li>登陆</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul>
        </div>
    </header>
</template>
<script>
export default {
    name: 'Header',
}
</script>
<style lang="scss">
@import '../assets/css/flex.scss';

.my-header {
    font-size: 20px;
    padding: 20px 0;
    background-color:#E6E6E6;
    line-height: 50px;
    height: 50px;
    // overflow: hidden;
    .main-nav {
        li {
            float: left;
            margin-left: 20px;
            &:first-child{
                margin-right: 40px;
                padding-left: -40px; 
            }
            flex-wrap: nowrap;
            overflow: hidden;
        }
    }
    @include flex();

    .info-nav{
        li {
            float: left;
            margin-left: 20px;
        }
    }
    img {
        width: 100px;
        height: 100px
    }
        
}


    
</style>